import { NavLink, useNavigate } from 'react-router-dom'
import Login from './views/login/login'
import imgs from "../../../public/logo.png"
import React, { useState } from 'react';
import { Button, Space, Table, Tag, Modal, Input, Form, message } from 'antd';
import type { SizeType } from 'antd/es/config-provider/SizeContext';
import {
    UserDeleteOutlined,
    FormOutlined,
    CloseCircleOutlined,
} from '@ant-design/icons';
import "./home.css"
import { addpassword } from '../../tools/ajxas';
import Hometwo from "../hometwo/hometwo"
const MyFormItemContext = React.createContext<(string | number)[]>([]);

interface MyFormItemGroupProps {
    prefix: string | number | (string | number)[];
    children: React.ReactNode;
}

function toArr(str: string | number | (string | number)[]): (string | number)[] {
    return Array.isArray(str) ? str : [str];
}

const MyFormItemGroup = ({ prefix, children }: MyFormItemGroupProps) => {
    const prefixPath = React.useContext(MyFormItemContext);
    const concatPath = React.useMemo(() => [...prefixPath, ...toArr(prefix)], [prefixPath, prefix]);

    return <MyFormItemContext.Provider value={concatPath}>{children}</MyFormItemContext.Provider>;
};

const MyFormItem = ({ name, ...props }: FormItemProps) => {
    const prefixPath = React.useContext(MyFormItemContext);
    const concatName = name !== undefined ? [...prefixPath, ...toArr(name)] : undefined;

    return <Form.Item name={concatName} {...props} />;
};

function Home() {
    const [size, setSize] = useState<SizeType>('large');
    const navgate = useNavigate()
    const [messageApi, contextHolder] = message.useMessage();

    // 跳转到管理用户页
    function gomanageer() {
        navgate("/manager")
    }
    // 退出登录
    function tuichu() {
        localStorage.clear("token")
        messageApi.open({
            type: 'success',
            content: '退出成功',
        });
        setTimeout(function () {
            navgate("/")
        }, 2000)
    }
    // 修改密码弹窗
    const [isModalOpen, setIsModalOpen] = useState(false);
    const showModal = () => {
        setIsModalOpen(true);
    };
    const handleOk = () => {
        setIsModalOpen(false);
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };
    const onFinish = (value: object) => {
        // console.log(value.user.name.count, value.user.name.password);
        addpassword({
            oldPwd: value.user.name.count,
            newPwd: value.user.name.password,
            token: localStorage.getItem("token")
        }).then(res => {
            if (res.data.code == 2) {
                messageApi.open({
                    type: 'success',
                    content: '修改成功',
                });
                handleCancel()
            } else {
                messageApi.open({
                    type: 'error',
                    content: '修改失败',
                });
            }
        }, [])
    };
    return <div className="my_home">
        {contextHolder}
        <div className='my_top'>
            <div className='img'><img src={imgs} /></div>
            <div><h2>中国移动边缘UPF设备配置及报价系统</h2></div>
            <div className='my_btn'>
                <Button ghost className='my_l' size={size} onClick={gomanageer}><Space><UserDeleteOutlined /></Space>管理用户</Button>
                <>
                    <Button ghost className='my_l' size={size} onClick={showModal}><Space><FormOutlined /></Space>修改密码</Button>
                    <Modal title="修改密码" centered={true} footer={null} open={isModalOpen} onOk={handleOk} onCancel={handleCancel} >
                        <div className="my_user">
                            <Form name="form_item_path" layout="horizontal " onFinish={onFinish}>
                                <MyFormItemGroup prefix={['user']}>
                                    <MyFormItemGroup prefix={['name']}>
                                        <MyFormItem name="count" label="老密码" >
                                            <Input />
                                        </MyFormItem>
                                        <MyFormItem name="password" label="新密码">
                                            <Input />
                                        </MyFormItem>
                                    </MyFormItemGroup>
                                </MyFormItemGroup>
                                <Button type="primary" htmlType="submit">
                                    提交
                                </Button>
                            </Form>
                        </div>
                    </Modal>
                </>
                <Button ghost size={size} onClick={tuichu}><Space><CloseCircleOutlined /></Space>退出登录</Button>
            </div>
        </div>
        {/* baner内容模块 */}
        <Hometwo></Hometwo>
    </div>
}
export default Home